<template>
  <control :title="$toUpperCase(information.type) + ' ' + information.name">
    <el-form ref="formValidate" label-width="90px" label-position="left" size="mini">
      <el-row>
        <Item title="关键字段">
          <el-form-item label="字段标识">
            <el-input v-model="information.model" placeholder="" size="small" />
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="information.name" placeholder="" size="small" />
          </el-form-item>
        </Item>
        <Item title="配置设置">
          <el-form-item label="默认值">
            <el-cascader
              v-model="information.options.defaultValue"
              :options="information.options.remoteOptions"
              :props="information.options.props"
              style="width: 236px"
              size="small"
              clearable
              placeholder="请选择默认值"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input v-model="information.options.width" placeholder="" size="small" />
          </el-form-item>
          <el-form-item label="label宽度">
            <el-input v-model="information.labelWidth" placeholder="" size="small" />
          </el-form-item>
          <el-form-item label="占位内容">
            <el-input v-model="information.options.placeholder" placeholder="" size="small" />
          </el-form-item>
          <el-form-item label="是否可清空">
            <el-switch v-model="information.options.clearable" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item label="是否可多选">
            <el-switch
              v-model="information.options.props.multiple"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-switch v-model="information.options.disabled" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </Item>
        <Item title="选项内容">
          <!-- <el-form-item label="远端数据">
            <el-radio :label="true" :value="true">远端数据</el-radio>
          </el-form-item> -->
          <template>
            <el-form-item label="远端方法">
              <el-input v-model="information.options.remoteFunc" placeholder="" size="small" />
            </el-form-item>
            <el-form-item label="值">
              <el-input v-model="information.options.props.value" placeholder="" size="small" />
            </el-form-item>
            <el-form-item label="标签">
              <el-input v-model="information.options.props.label" placeholder="" size="small" />
            </el-form-item>
          </template>
        </Item>
        <Item title="效验规则">
          <el-form-item label="是否必填">
            <el-switch v-model="information.options.required" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </Item>
      </el-row>
    </el-form>
  </control>
</template>

<script>
import { mapGetters } from 'vuex'

import control from '@/components/control-panel.vue'
import Item from './components/Item.vue'
export default {
  components: {
    control,
    Item
  },
  watch: {
    'information.options.required': {
      handler(newVal, oldVal) {
        this.validateRequired(newVal)
      },
      immediate: true
    }
  },
  props: ['information'],
  computed: {
    ...mapGetters(['componentsData', 'activeComponent'])
  },
  data() {
    return {
      validator: {
        type: null,
        required: null
      }
    }
  },
  mounted() {
    const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
    this.$set(this.information.options, 'remoteFunc', 'func_' + key)
    // let remoteOptions = [
    //   {
    //     label: 'remote1',
    //     value: '1',
    //     children: [
    //       { label: 'remote11', value: '11' },
    //       { label: 'remote12', value: '12' }
    //     ]
    //   },
    //   {
    //     label: 'remote2',
    //     value: '2',
    //     children: [
    //       { label: 'remote21', value: '21' },
    //       { label: 'remote22', value: '22' }
    //     ]
    //   },
    //   {
    //     label: 'remote3',
    //     value: '3',
    //     children: [
    //       { label: 'remote31', value: '31' },
    //       { label: 'remote32', value: '32' }
    //     ]
    //   }
    // ]
    // this.$set(this.information.options, 'remoteOptions', remoteOptions)
  },
  methods: {
    validateRequired(val) {
      if (val) {
        this.validator.required = {
          required: true,
          message: `${this.information.name}必须填写`
        }
      } else {
        this.validator.required = null
      }
      this.$nextTick(() => {
        this.generateRule()
      })
    },
    // validateRemote(val) {
    //   if (val) {
    //     let remoteOptions = [
    //       { label: 'remote1', value: '1' },
    //       { label: 'remote2', value: '2' },
    //       { label: 'remote3', value: '3' }
    //     ]
    //
    //     this.$set(this.information.options, 'remoteFunc', 'func_' + key)
    //     this.$set(this.information.options, 'remoteOptions', remoteOptions)
    //     this.$set(this.information.options, 'props', { value: 'value', label: 'label' })
    //   } else {
    //     delete this.information.options.remoteFunc
    //     //  = null
    //   }
    // },
    generateRule() {
      this.information.rules = []
      Object.keys(this.validator).forEach((key) => {
        if (this.validator[key]) {
          this.information.rules.push(this.validator[key])
          // this.$set(this.information.rules, this.information.rules.length + 1, this.validator[key])
          console.log(this.componentsData.list)
        }
      })
    },
    handleOptionsRemove(index) {
      this.information.options.options.splice(index, 1)
    },
    handleAddColumn() {
      this.information.options.options.push({
        value: '新选项',
        label: '新选项'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.drag-items {
  display: flex;
  align-items: center;
  padding: 5px;

  .drag-item {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    cursor: move;
  }
}
:deep(.el-form-item__label) {
  color: #8c8c8c;
  opacity: 0.65;
}
</style>
